<template>
  <div :class="$style.container">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"  v-if="page.total > page.size"
      :current-page.sync="page.current" :page-size="page.size" layout="total, prev, pager, next" 
      :total="page.total"
    >
    </el-pagination>
  </div>
</template>
<script>
export default { 
  props: {
    page: {
      type:Object,
      default: () => ({
        total:0,
        size:10,
        current:1
      })
    }
  },
  methods: {
    // 切换每页显示的条数
    handleSizeChange (size) {
      this.$emit('pagination',this.page.current, size)
    },
    // 显示页码
    handleCurrentChange (page) {
       this.$emit('pagination',page, this.page.size)
    }
  }
};
</script> 
<style lang="scss" module>
.container {
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
}
</style>